{% extends "base.html" %}

{% block title %}成绩管理 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .score-card {
        border-radius: 0.5rem;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .score-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    .score-value {
        font-size: 2rem;
        font-weight: 700;
    }
    .pass-score {
        color: #28a745;
    }
    .fail-score {
        color: #dc3545;
    }
    .progress {
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
    }
    .score-detail-link {
        color: #007bff;
        cursor: pointer;
        text-decoration: underline;
    }
    .score-detail-link:hover {
        color: #0056b3;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-graduation-cap mr-2 text-primary"></i>成绩管理
    </h1>
    <p class="text-gray-600">查看和管理您的课程成绩</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="row mb-6">
    <!-- 成绩统计卡片 -->
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="score-card bg-white shadow-sm p-5">
            <div class="d-flex justify-content-between items-center mb-3">
                <h3 class="text-lg font-medium text-gray-700">平均成绩</h3>
                <span class="bg-primary/10 text-primary p-2 rounded-full">
                    <i class="fa fa-star"></i>
                </span>
            </div>
            <div class="score-value pass-score">{{ average_score }}</div>
            <div class="text-sm text-gray-500 mt-1">
                {% if score_trend > 0 %}
                <span class="text-success"><i class="fa fa-arrow-up"></i> {{ score_trend }}% 较上学期</span>
                {% elif score_trend < 0 %}
                <span class="text-danger"><i class="fa fa-arrow-down"></i> {{ -score_trend }}% 较上学期</span>
                {% else %}
                <span>与上学期持平</span>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="score-card bg-white shadow-sm p-5">
            <div class="d-flex justify-content-between items-center mb-3">
                <h3 class="text-lg font-medium text-gray-700">已修学分</h3>
                <span class="bg-secondary/10 text-secondary p-2 rounded-full">
                    <i class="fa fa-book"></i>
                </span>
            </div>
            <div class="score-value">{{ completed_credits }}/{{ total_credits }}</div>
            <div class="text-sm text-gray-500 mt-1">
                <div class="progress">
                    <div class="progress-bar bg-secondary" role="progressbar" style="width: {{ completed_credits_percentage }}%" aria-valuenow="{{ completed_credits_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="score-card bg-white shadow-sm p-5">
            <div class="d-flex justify-content-between items-center mb-3">
                <h3 class="text-lg font-medium text-gray-700">优秀课程</h3>
                <span class="bg-success/10 text-success p-2 rounded-full">
                    <i class="fa fa-trophy"></i>
                </span>
            </div>
            <div class="score-value">{{ excellent_courses }}</div>
            <div class="text-sm text-gray-500 mt-1">
                <span>成绩 ≥ 90 分的课程</span>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="score-card bg-white shadow-sm p-5">
            <div class="d-flex justify-content-between items-center mb-3">
                <h3 class="text-lg font-medium text-gray-700">需要改进</h3>
                <span class="bg-warning/10 text-warning p-2 rounded-full">
                    <i class="fa fa-exclamation-triangle"></i>
                </span>
            </div>
            <div class="score-value">{{ need_improvement_courses }}</div>
            <div class="text-sm text-gray-500 mt-1">
                <span>成绩 < 60 分的课程</span>
            </div>
        </div>
    </div>
</div>

<!-- 搜索和筛选 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
    <div class="row">
        <div class="col-md-4 mb-3">
            <div class="input-group">
                <span class="input-group-text"><i class="fa fa-search"></i></span>
                <input type="text" class="form-control" placeholder="搜索课程名称" id="course-search">
            </div>
        </div>
        <div class="col-md-2 mb-3">
            <select class="form-select" id="semester-filter">
                <option value="all">全部学期</option>
                {% for semester in semesters %}
                <option value="{{ semester }}">{{ semester }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-2 mb-3">
            <select class="form-select" id="type-filter">
                <option value="all">全部类型</option>
                <option value="必修课">必修课</option>
                <option value="选修课">选修课</option>
                <option value="实践课">实践课</option>
            </select>
        </div>
        <div class="col-md-2 mb-3">
            <select class="form-select" id="score-filter">
                <option value="all">全部成绩</option>
                <option value="excellent">优秀 (≥90)</option>
                <option value="good">良好 (80-89)</option>
                <option value="pass">及格 (60-79)</option>
                <option value="fail">不及格 (<60)</option>
            </select>
        </div>
        <div class="col-md-2 mb-3">
            <button class="btn btn-primary w-100" id="filter-button">
                <i class="fa fa-filter mr-2"></i>筛选
            </button>
        </div>
    </div>
</div>

<!-- 成绩列表 -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
    <div class="d-flex justify-content-between items-center mb-4">
        <h2 class="text-xl font-semibold text-gray-800">成绩明细</h2>
        <div class="text-sm text-gray-500">
            共 {{ scores|length }} 门课程
        </div>
    </div>
    
    {% if scores %}        
    <div class="overflow-x-auto">
        <table class="table table-hover">
            <thead>
                <tr class="text-gray-600 bg-gray-50">
                    <th>课程名称</th>
                    <th>学期</th>
                    <th>类型</th>
                    <th>学分</th>
                    <th>成绩</th>
                    <th>绩点</th>
                    <th>状态</th>
                    <th>考试日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for score in scores %}
                <tr class="score-item" data-course="{{ score.course.name|lower }}" data-semester="{{ score.semester }}" data-type="{{ score.course.type }}" data-score="{{ score.score }}">
                    <td>
                        <div class="d-flex items-center">
                            <span class="badge rounded-full mr-2" style="background-color: {{ score.course.color }};"></span>
                            {{ score.course.name }}
                        </div>
                    </td>
                    <td>{{ score.semester }}</td>
                    <td>{{ score.course.type }}</td>
                    <td>{{ score.course.credits }}</td>
                    <td>
                        <div class="score-value {% if score.score >= 60 %}pass-score{% else %}fail-score{% endif %}">
                            {{ score.score }}
                        </div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: {{ score.score }}%; background-color: {{ 'green' if score.score >= 60 else 'red' }}" aria-valuenow="{{ score.score }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </td>
                    <td>{{ score.gpa }}</td>
                    <td>
                        {% if score.score >= 90 %}
                        <span class="badge bg-success">优秀</span>
                        {% elif score.score >= 80 %}
                        <span class="badge bg-primary">良好</span>
                        {% elif score.score >= 70 %}
                        <span class="badge bg-info">中等</span>
                        {% elif score.score >= 60 %}
                        <span class="badge bg-secondary">及格</span>
                        {% else %}
                        <span class="badge bg-danger">不及格</span>
                        {% endif %}
                    </td>
                    <td>{{ score.exam_date.strftime('%Y-%m-%d') if score.exam_date else '未设置' }}</td>
                    <td>
                        <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#scoreDetailModal" data-score-id="{{ score.id }}">
                            <i class="fa fa-eye mr-1"></i>详情
                        </button>
                        <a href="{{ url_for('add_score', course_id=score.course.id) }}" class="btn btn-sm btn-primary">
                            <i class="fa fa-edit mr-1"></i>编辑
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- 分页控制 -->
    {% if total_pages > 1 %}
    <div class="mt-4 d-flex justify-content-center">
        <nav aria-label="成绩分页">
            <ul class="pagination">
                {% if current_page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ current_page - 1 }}" aria-label="上一页">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}
                
                {% for page_num in range(1, total_pages + 1) %}
                {% if page_num == current_page %}
                <li class="page-item active">
                    <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                </li>
                {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                </li>
                {% endif %}
                {% endfor %}
                
                {% if current_page < total_pages %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ current_page + 1 }}" aria-label="下一页">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
    
    {% else %}
    <div class="text-center py-10">
        <i class="fa fa-folder-open-o text-4xl text-gray-300 mb-3"></i>
        <p class="text-gray-500">暂无成绩记录</p>
        <a href="{{ url_for('add_score') }}" class="btn btn-primary mt-3">
            <i class="fa fa-plus mr-2"></i>添加成绩
        </a>
    </div>
    {% endif %}
</div>

<!-- 成绩详情模态框 -->
<div class="modal fade" id="scoreDetailModal" tabindex="-1" aria-labelledby="scoreDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scoreDetailModalLabel">成绩详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="scoreDetailContent">
                <div class="text-center py-5">
                    <i class="fa fa-spinner fa-spin text-3xl text-primary"></i>
                    <p class="mt-2">加载中...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 学习建议 -->
<div class="bg-white rounded-lg shadow-sm p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-4">
        <i class="fa fa-lightbulb-o mr-2 text-warning"></i>学习建议
    </h2>
    <div class="mb-4">
        <p class="text-gray-700 mb-3">基于您的成绩分析，我们为您提供以下建议：</p>
        <ul class="list-disc pl-6 space-y-2">
            {% if learning_suggestions %}
                {% for suggestion in learning_suggestions %}
                <li class="text-gray-600">{{ suggestion }}</li>
                {% endfor %}
            {% else %}
                <li class="text-gray-600">您的成绩表现优异，继续保持！</li>
                <li class="text-gray-600">可以考虑参加更多的学术活动或竞赛来丰富您的学习经历。</li>
                <li class="text-gray-600">与同学建立学习小组，互相帮助和进步。</li>
            {% endif %}
        </ul>
    </div>
    <div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fa fa-info-circle text-blue-500"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-blue-700">
                    如需辅导或有学习问题，请联系辅导员或相关课程教师。点击<a href="{{ url_for('appointment') }}" class="text-blue-600 font-medium">这里</a>预约辅导时间。
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 筛选功能
    document.getElementById('filter-button').addEventListener('click', function() {
        const searchTerm = document.getElementById('course-search').value.toLowerCase();
        const semesterFilter = document.getElementById('semester-filter').value;
        const typeFilter = document.getElementById('type-filter').value;
        const scoreFilter = document.getElementById('score-filter').value;
        
        const scoreItems = document.querySelectorAll('.score-item');
        let visibleCount = 0;
        
        scoreItems.forEach(item => {
            const courseName = item.getAttribute('data-course');
            const semester = item.getAttribute('data-semester');
            const type = item.getAttribute('data-type');
            const score = parseFloat(item.getAttribute('data-score'));
            
            // 搜索条件
            const matchesSearch = courseName.includes(searchTerm);
            
            // 学期筛选
            const matchesSemester = semesterFilter === 'all' || semester === semesterFilter;
            
            // 类型筛选
            const matchesType = typeFilter === 'all' || type === typeFilter;
            
            // 成绩筛选
            let matchesScore = true;
            if (scoreFilter === 'excellent') {
                matchesScore = score >= 90;
            } else if (scoreFilter === 'good') {
                matchesScore = score >= 80 && score < 90;
            } else if (scoreFilter === 'pass') {
                matchesScore = score >= 60 && score < 80;
            } else if (scoreFilter === 'fail') {
                matchesScore = score < 60;
            }
            
            // 显示或隐藏
            if (matchesSearch && matchesSemester && matchesType && matchesScore) {
                item.style.display = '';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });
        
        // 更新计数
        document.querySelector('.text-sm.text-gray-500').textContent = `共 ${visibleCount} 门课程`;
    });
    
    // 回车键搜索
    document.getElementById('course-search').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('filter-button').click();
        }
    });
    
    // 成绩详情模态框
    const scoreDetailModal = new bootstrap.Modal(document.getElementById('scoreDetailModal'));
    const scoreDetailContent = document.getElementById('scoreDetailContent');
    
    // 点击详情按钮
    document.querySelectorAll('[data-score-id]').forEach(button => {
        button.addEventListener('click', function() {
            const scoreId = this.getAttribute('data-score-id');
            
            // 这里应该通过AJAX请求获取成绩详情数据
            // 模拟数据加载
            scoreDetailContent.innerHTML = `
                <div class="text-center py-5">
                    <i class="fa fa-spinner fa-spin text-3xl text-primary"></i>
                    <p class="mt-2">加载中...</p>
                </div>
            `;
            
            // 模拟异步加载
            setTimeout(() => {
                // 这里是模拟数据，实际应用中应该从服务器获取
                const scoreRow = this.closest('tr');
                const courseName = scoreRow.querySelector('td:first-child').textContent.trim();
                const semester = scoreRow.querySelector('td:nth-child(2)').textContent;
                const type = scoreRow.querySelector('td:nth-child(3)').textContent;
                const credits = scoreRow.querySelector('td:nth-child(4)').textContent;
                const score = scoreRow.querySelector('td:nth-child(5) .score-value').textContent;
                const gpa = scoreRow.querySelector('td:nth-child(6)').textContent;
                const status = scoreRow.querySelector('td:nth-child(7) span').textContent;
                const examDate = scoreRow.querySelector('td:nth-child(8)').textContent;
                
                // 填充详情内容
                scoreDetailContent.innerHTML = `
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h3 class="text-lg font-medium text-gray-700 mb-2">课程信息</h3>
                                <div class="space-y-2">
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">课程名称：</span>
                                        <span class="font-medium">${courseName}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">学期：</span>
                                        <span>${semester}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">课程类型：</span>
                                        <span>${type}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">学分：</span>
                                        <span>${credits}</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <h3 class="text-lg font-medium text-gray-700 mb-2">成绩信息</h3>
                                <div class="space-y-2">
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">考试成绩：</span>
                                        <span class="font-medium ${parseFloat(score) >= 60 ? 'pass-score' : 'fail-score'}">${score}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">绩点：</span>
                                        <span>${gpa}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">成绩等级：</span>
                                        <span>${status}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">考试日期：</span>
                                        <span>${examDate}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h3 class="text-lg font-medium text-gray-700 mb-2">成绩构成</h3>
                                <div class="space-y-3">
                                    <div>
                                        <div class="flex justify-between mb-1">
                                            <span class="text-gray-500">平时成绩 (40%)</span>
                                            <span>${Math.round(parseFloat(score) * 0.4)}</span>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: ${Math.round(parseFloat(score) * 0.4)}%" aria-valuenow="${Math.round(parseFloat(score) * 0.4)}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between mb-1">
                                            <span class="text-gray-500">期中考试 (20%)</span>
                                            <span>${Math.round(parseFloat(score) * 0.2)}</span>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: ${Math.round(parseFloat(score) * 0.2)}%" aria-valuenow="${Math.round(parseFloat(score) * 0.2)}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between mb-1">
                                            <span class="text-gray-500">期末考试 (40%)</span>
                                            <span>${Math.round(parseFloat(score) * 0.4)}</span>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-warning" role="progressbar" style="width: ${Math.round(parseFloat(score) * 0.4)}%" aria-valuenow="${Math.round(parseFloat(score) * 0.4)}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <h3 class="text-lg font-medium text-gray-700 mb-2">教师评语</h3>
                                <div class="bg-gray-50 p-3 rounded">
                                    <p class="text-gray-600 italic">
                                        {{ teacher_comments or '暂无教师评语' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            }, 800);
        });
    });
    
    // 页面加载完成后的动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 成绩卡片淡入效果
        const scoreCards = document.querySelectorAll('.score-card');
        scoreCards.forEach((card, index) => {
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 100 * index);
        });
    });
</script>
{% endblock %}